<template>
	<v-chart :option="chartOptions" autoresize style="height: 300px;" />
</template>

<script setup>
import { computed, watch } from 'vue'
import VChart from 'vue-echarts'
import * as echarts from 'echarts'

// ⛔ 不要解构 props
const props = defineProps({ data: Object })

// ✅ computed + props.data 响应式引用
const chartOptions = computed(() => ({
	title: { text: props.data?.title || '能耗趋势对比' },
	tooltip: { trigger: 'axis' },
	legend: { data: ['本周期', '对比周期'] },
	xAxis: { type: 'category', data: props.data?.labels || [] },
	yAxis: { type: 'value' },
	series: [
		{ name: '本周期', type: 'line', data: props.data?.current || [] },
		{ name: '对比周期', type: 'line', data: props.data?.previous || [] }
	]
}))
</script>
